



<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
<meta name="theme-color" content="#FFF">
  <link rel="apple-touch-icon" sizes="180x180" href="/my-blog/images/apple-touch-icon.png">

<link rel="icon" type="image/ico" sizes="32x32" href="/my-blog/images/favicon.ico">
  <meta http-equiv="Cache-Control" content="no-transform">
  <meta http-equiv="Cache-Control" content="no-siteapp">


<link rel="alternate" type="application/rss+xml" title="gason" href="https://gason1997.gitee.io/my-blog/rss.xml" />
<link rel="alternate" type="application/atom+xml" title="gason" href="https://gason1997.gitee.io/my-blog/atom.xml" />
<link rel="alternate" type="application/json" title="gason" href="https://gason1997.gitee.io/my-blog/feed.json" />

<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Mulish:300,300italic,400,400italic,700,700italic%7CFredericka%20the%20Great:300,300italic,400,400italic,700,700italic%7CNoto%20Serif%20JP:300,300italic,400,400italic,700,700italic%7CNoto%20Serif%20SC:300,300italic,400,400italic,700,700italic%7CInconsolata:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">

<link rel="stylesheet" href="/my-blog/css/app.css?v=0.2.5">

  
  <meta name="keywords" content="JavaScript" />


<link rel="canonical" href="https://gason1997.gitee.io/my-blog/2022/03/03/web-study/js-study/JavaScript/">



  <title>
JavaScript入门 - Javascript - 前端基础类 |
Sang`s Homepage = gason</title>
<meta name="generator" content="Hexo 6.2.0"></head>
<body itemscope itemtype="http://schema.org/WebPage">
  <div id="loading">
    <div class="cat">
      <div class="body"></div>
      <div class="head">
        <div class="face"></div>
      </div>
      <div class="foot">
        <div class="tummy-end"></div>
        <div class="bottom"></div>
        <div class="legs left"></div>
        <div class="legs right"></div>
      </div>
      <div class="paw">
        <div class="hands left"></div>
        <div class="hands right"></div>
      </div>
    </div>
  </div>
  <div id="container">
    <header id="header" itemscope itemtype="http://schema.org/WPHeader">
      <div class="inner">
        <div id="brand">
          <div class="pjax">
          
  <h1 itemprop="name headline">JavaScript入门
  </h1>
  
<div class="meta">
  <span class="item" title="创建时间：2022-03-03 11:49:19">
    <span class="icon">
      <i class="ic i-calendar"></i>
    </span>
    <span class="text">发表于</span>
    <time itemprop="dateCreated datePublished" datetime="2022-03-03T11:49:19+08:00">2022-03-03</time>
  </span>
  <span class="item" title="本文字数">
    <span class="icon">
      <i class="ic i-pen"></i>
    </span>
    <span class="text">本文字数</span>
    <span>6.3k</span>
    <span class="text">字</span>
  </span>
  <span class="item" title="阅读时长">
    <span class="icon">
      <i class="ic i-clock"></i>
    </span>
    <span class="text">阅读时长</span>
    <span>6 分钟</span>
  </span>
</div>


          </div>
        </div>
        <nav id="nav">
  <div class="inner">
    <div class="toggle">
      <div class="lines" aria-label="切换导航栏">
        <span class="line"></span>
        <span class="line"></span>
        <span class="line"></span>
      </div>
    </div>
    <ul class="menu">
      <li class="item title"><a href="/my-blog/" rel="start">Sang`s Homepage</a></li>
    </ul>
    <ul class="right">
      <li class="item theme">
        <i class="ic i-sun"></i>
      </li>
      <li class="item search">
        <i class="ic i-search"></i>
      </li>
    </ul>
  </div>
</nav>

      </div>
      <div id="imgs" class="pjax">
          <img src="https://tva4.sinaimg.cn/large/008sruU2ly8h4dao5ndb8j30m80gota1.jpg">
      </div>
    </header>
    <div id="waves">
      <svg class="waves" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 24 150 28" preserveAspectRatio="none" shape-rendering="auto">
        <defs>
          <path id="gentle-wave" d="M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z" />
        </defs>
        <g class="parallax">
          <use xlink:href="#gentle-wave" x="48" y="0" />
          <use xlink:href="#gentle-wave" x="48" y="3" />
          <use xlink:href="#gentle-wave" x="48" y="5" />
          <use xlink:href="#gentle-wave" x="48" y="7" />
        </g>
      </svg>
    </div>
    <main>
      <div class="inner">
        <div id="main" class="pjax">
          
  <div class="article wrap">
    
<div class="breadcrumb" itemscope itemtype="https://schema.org/BreadcrumbList">
<i class="ic i-home"></i>
<span><a href="/my-blog/">首页</a></span><i class="ic i-angle-right"></i>
<span  itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem"><a href="/my-blog/categories/web-study/" itemprop="item" rel="index" title="分类于 前端基础类"><span itemprop="name">前端基础类</span></a>
<meta itemprop="position" content="1" /></span>
<i class="ic i-angle-right"></i>
<span  class="current" itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem"><a href="/my-blog/categories/web-study/js-study/" itemprop="item" rel="index" title="分类于 Javascript"><span itemprop="name">Javascript</span></a>
<meta itemprop="position" content="2" /></span>
</div>

    <article itemscope itemtype="http://schema.org/Article" class="post block" lang="zh-CN">
  <link itemprop="mainEntityOfPage" href="https://gason1997.gitee.io/my-blog/2022/03/03/web-study/js-study/JavaScript/">

  <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
    <meta itemprop="image" content="/my-blog/images/avatar.jpg">
    <meta itemprop="name" content="小矮人gason">
    <meta itemprop="description" content=", 大丈夫之志应如长江东奔大海">
  </span>

  <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
    <meta itemprop="name" content="gason">
  </span>

  <div class="body md" itemprop="articleBody">
    

    <h1 id="javascript"><a class="markdownIt-Anchor" href="#javascript">#</a> JavaScript</h1>
<h2 id="概念及入门"><a class="markdownIt-Anchor" href="#概念及入门">#</a> 概念及入门</h2>
<figure class="highlight text"><figcaption><span>scanner</span></figcaption><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line">概念</span><br><span class="line">	一种运行在客户端的脚本语言(script就是脚本的意思)</span><br><span class="line">作用</span><br><span class="line">	表单动态校验(或者密码强度的检测) 最初目的</span><br><span class="line">	网页的特性</span><br><span class="line">	服务端的开发(Node.js)</span><br><span class="line">	桌面程序</span><br><span class="line">	app</span><br><span class="line">	控制硬件-物联网</span><br><span class="line">	游戏开发(cocos2d-js)</span><br><span class="line">组成</span><br><span class="line">	- ECMAScript: 基础语法</span><br><span class="line">	- DOM: 文档数据模型</span><br><span class="line">	- BOM: 浏览器对象模型</span><br></pre></td></tr></table></figure>
<h2 id="变量"><a class="markdownIt-Anchor" href="#变量">#</a> 变量</h2>
<figure class="highlight text"><figcaption><span>scanner</span></figcaption><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line">概念</span><br><span class="line">	本质就是内存中用来存储数据的那一块空间</span><br><span class="line">作用</span><br><span class="line">	存储变化的数据</span><br><span class="line">使用</span><br><span class="line">	1,先声明再赋值</span><br><span class="line">	2,声明的同时赋值</span><br><span class="line">特点</span><br><span class="line">	里面的数据可以修改的</span><br><span class="line">注意点</span><br><span class="line">	变量名不能以数字开头</span><br><span class="line">	严格区分大小写</span><br><span class="line">	变量名不能是关键字或者保留字</span><br></pre></td></tr></table></figure>
<h2 id="数据类型"><a class="markdownIt-Anchor" href="#数据类型">#</a> 数据类型</h2>
<figure class="highlight text"><figcaption><span>scanner</span></figcaption><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br></pre></td><td class="code"><pre><span class="line">作用</span><br><span class="line">	给数据进行分类,方便管理</span><br><span class="line">分类</span><br><span class="line">	基本数据类型</span><br><span class="line">		- Number: 数字型</span><br><span class="line">        - String: 字符型</span><br><span class="line">        - Boolean: 布尔型</span><br><span class="line">        - Undefined: 未定义</span><br><span class="line">        - Null: 空</span><br><span class="line">    引用数据类型</span><br><span class="line">    	对象 数组</span><br><span class="line">转换</span><br><span class="line">	强制转换</span><br><span class="line">    	String():将参数转成字符串</span><br><span class="line">    	Number():将参数转成数值</span><br><span class="line">    		注意: null 可以和数值进行转换,而undefined不可以</span><br><span class="line">    	Boolean():将参数转成Boolean的结果(true和false)</span><br><span class="line">    		结论: Boolean可以将任意的类型转成true或者false.0 null undefined 空字符串 可以转成fasle 其他都是true</span><br><span class="line"></span><br><span class="line">	自动转换</span><br><span class="line">    	针对于+运算 规律</span><br><span class="line">    		如果+两端有一端是字符,就会执行字符的拼接</span><br><span class="line">    		如果+两端没有一个是字符,就会使用Number()强转,然后再进行加法运算</span><br></pre></td></tr></table></figure>
<h2 id="运算符"><a class="markdownIt-Anchor" href="#运算符">#</a> 运算符</h2>
<figure class="highlight text"><figcaption><span>scanner</span></figcaption><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line">算术运算符</span><br><span class="line">	+ - * / %</span><br><span class="line">自增自减运算符</span><br><span class="line">	++ --</span><br><span class="line">	++在前. 先变量+1,再返回计算后的结果</span><br><span class="line">	++在后  先把变量的值返回,然后变量再加1</span><br><span class="line">	结论:不管++在前还是在后,最终变量的值都会加1</span><br><span class="line"></span><br><span class="line">比较运算符</span><br><span class="line">	&gt; &lt; &gt;= &lt;= == != ===</span><br><span class="line">	结果是boolean类型</span><br><span class="line"></span><br><span class="line">逻辑运算符</span><br><span class="line">	&amp;&amp; ||  !</span><br><span class="line">	结果是boolean类型</span><br></pre></td></tr></table></figure>
<figure class="highlight html"><figcaption><span>scanner</span></figcaption><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">赋值运算符 基础 = 复合赋值运算 += -= *= /= %= 三元运算符 表达式1 ? 表达式2 :</span><br><span class="line">表达式3</span><br></pre></td></tr></table></figure>
<h2 id="选择语句"><a class="markdownIt-Anchor" href="#选择语句">#</a> 选择语句</h2>
<figure class="highlight html"><figcaption><span>scanner</span></figcaption><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">if :判断一个条件 if(表达式)&#123; 语句 &#125; if-else :判断一个条件 if(表达式)&#123; 语句</span><br><span class="line">&#125;else&#123; 语句 &#125; if-else-if :判断多个条件 if(表达式1)&#123; 语句1 &#125;else if(表达式2)&#123;</span><br><span class="line">语句2 &#125; ... else&#123; 语句 &#125; switch :判断多个条件 switch(表达式)&#123; case 值1: 语句1</span><br><span class="line">break case 值2: 语句2 break ... default 语句 break &#125; 应用场景</span><br><span class="line">所有的switch语句都可以使用if语句进行改写,但是所有的if语句不一定能用switch改写</span><br><span class="line">if一般用于范围的判断,switch一般用于等值判断</span><br><span class="line">如果某个场景只有固定几个取值,可以考虑使用switch,语句层次更加清晰</span><br></pre></td></tr></table></figure>
<h2 id="循环语句"><a class="markdownIt-Anchor" href="#循环语句">#</a> 循环语句</h2>
<figure class="highlight html"><figcaption><span>scanner</span></figcaption><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">for for(初始化语句;条件判断语句;循环增量语句)&#123; 循环体语句; &#125; 双重循环</span><br><span class="line">外层循环一次,内层要循环所有次 外层控制行数,内层控制列数 while循环 基本格式</span><br><span class="line">while(表达式)&#123; 语句体 &#125; 完整格式 初始化语句 while(条件判断语句)&#123; 语句体</span><br><span class="line">循环增量语句 &#125; do-while循环 基本格式 do&#123; 语句体 &#125;while(表达式) 完整格式</span><br><span class="line">初始化语句 do&#123; 语句体 循环增量语句 &#125;while(条件判断语句) 区别 while和for</span><br><span class="line">都是先判断条件,在执行循环体 do-while 不管条件是否成立,都会先执行一次循环体</span><br><span class="line">应用场景 循环次数确定的话,建议使用for循环,结构简单</span><br><span class="line">循环次数不确定的话,建议使用while循环</span><br></pre></td></tr></table></figure>
<h2 id="两个关键字"><a class="markdownIt-Anchor" href="#两个关键字">#</a> 两个关键字</h2>
<figure class="highlight html"><figcaption><span>scanner</span></figcaption><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">continue 跳过本次循环,继续下一次循环 break 终止当前循环</span><br></pre></td></tr></table></figure>
<h2 id="数组"><a class="markdownIt-Anchor" href="#数组">#</a> 数组</h2>
<figure class="highlight text"><figcaption><span>scanner</span></figcaption><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br></pre></td><td class="code"><pre><span class="line">概念</span><br><span class="line">	存放数据的容器,方便管理数据</span><br><span class="line">定义及初始化</span><br><span class="line">	var arr = []</span><br><span class="line">	var arr = [1,2,3]</span><br><span class="line">取值</span><br><span class="line">	arr[0]</span><br><span class="line">修改值</span><br><span class="line">	arr[0]=9</span><br><span class="line">新增</span><br><span class="line">	arr[新的索引] = 值</span><br><span class="line">删除</span><br><span class="line">	delete arr[索引]</span><br><span class="line">遍历</span><br><span class="line">	for循环</span><br><span class="line">求和</span><br><span class="line">	思路:遍历然后累加</span><br><span class="line">求最值</span><br><span class="line">	思路:遍历 然后依次拿后面的元素 跟擂台变量进行比较</span><br><span class="line">二维数组</span><br><span class="line">	概念</span><br><span class="line">		数组的数组,本质还是一个数组,只不过里面的元素是数组</span><br><span class="line">	取值</span><br><span class="line">		arr[索引] 取到的是 里面的小数组</span><br><span class="line">		arr[索引][索引]  取到的是 具体的元素</span><br><span class="line">	遍历</span><br><span class="line">		双重循环</span><br></pre></td></tr></table></figure>
<h2 id="函数"><a class="markdownIt-Anchor" href="#函数">#</a> 函数</h2>
<figure class="highlight text"><figcaption><span>scanner</span></figcaption><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br></pre></td><td class="code"><pre><span class="line">概念</span><br><span class="line">	封装了一段具有特殊功能的代码块</span><br><span class="line">作用</span><br><span class="line">	方便调用</span><br><span class="line">使用</span><br><span class="line">	1,先定义</span><br><span class="line">	2,调用</span><br><span class="line">参数</span><br><span class="line">	相当于一个媒介,调用者可以把要操作的数据通过参数传递到函数内部进行操作</span><br><span class="line">	可以提高程序的灵活性</span><br><span class="line">返回值</span><br><span class="line">	相当于函数将操作完的数据返回给调用者,这样调用者就可以拿到数据进行进一步操作</span><br><span class="line">如何获取函数的参数</span><br><span class="line">	在函数内部,存在一个内置的变量arguments,是个伪数组</span><br><span class="line">分类</span><br><span class="line">	普通函数(带名字)</span><br><span class="line">	匿名函数(没有名字)</span><br><span class="line">注意</span><br><span class="line">	1,如果没有显示的调用return.则方法没有返回值</span><br><span class="line">	2,函数名其实是代表整个函数</span><br><span class="line">	3,实参的个数少于形参,多余形参赋不上值,就是undefined</span><br></pre></td></tr></table></figure>
<h2 id="面向对象"><a class="markdownIt-Anchor" href="#面向对象">#</a> 面向对象</h2>
<figure class="highlight text"><figcaption><span>scanner</span></figcaption><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br></pre></td><td class="code"><pre><span class="line">概念</span><br><span class="line">	面向过程:完成一件事需要多少个步骤(重点关注在步骤)</span><br><span class="line">	面向对象:完成一件事需要多少个对象(重点是在找对象)</span><br><span class="line">类</span><br><span class="line">	类是对现实生活中具有相同属性和行为的事物的一个统称 (抽象的,相当于是模板)</span><br><span class="line">对象</span><br><span class="line">	现实生活中一个具体的存在 (具体的,通过模板创建出来的)</span><br><span class="line">类和对象关系</span><br><span class="line">	类相当于是模板,对象是通过这个模板创建出来的一个个真实存在的个体</span><br><span class="line">	类中有什么,对象中就有什么</span><br><span class="line">类的三要素</span><br><span class="line">	类名</span><br><span class="line">	属性:类所具有的特征</span><br><span class="line">	行为:类所有具有的功能</span><br><span class="line">类的定义</span><br><span class="line">	function 类名(参数1,参数2)&#123;</span><br><span class="line">		属性的定义</span><br><span class="line">		this.属性名1=参数1</span><br><span class="line">		this.属性名2=参数2</span><br><span class="line">		this.方法名 = function()&#123;</span><br><span class="line">			方法体代码</span><br><span class="line">		&#125;</span><br><span class="line">	&#125;</span><br><span class="line">对象的创建</span><br><span class="line">	var 对象名 = new 类名(实际参数1,实际参数2)</span><br><span class="line">调用方法和属性</span><br><span class="line">	对象名.属性名</span><br><span class="line">	对象名.方法名</span><br><span class="line"></span><br><span class="line">new实例化的过程(了解)</span><br><span class="line"></span><br><span class="line">this:谁调用我,我就代表谁</span><br></pre></td></tr></table></figure>
<h2 id="math-对象"><a class="markdownIt-Anchor" href="#math-对象">#</a> Math 对象</h2>
<figure class="highlight text"><figcaption><span>scanner</span></figcaption><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line">概念</span><br><span class="line">	数学相关的对象</span><br><span class="line">方法</span><br><span class="line">	Math.PI</span><br><span class="line">	Math.max(1,3,9)</span><br><span class="line">	Math.min(1,3,9)</span><br><span class="line">	Math.abs(-1)</span><br><span class="line">	Math.ceil(1.2)</span><br><span class="line">	Math.floor(1.2)</span><br><span class="line">	Math.round(1.2)</span><br><span class="line">生成随机数</span><br><span class="line">	Math.random() 范围[0,1)</span><br><span class="line">	Math.random()*(max-min+1) + min  范围[min,max]</span><br></pre></td></tr></table></figure>
<h2 id="date-对象"><a class="markdownIt-Anchor" href="#date-对象">#</a> Date 对象</h2>
<figure class="highlight text"><figcaption><span>scanner</span></figcaption><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line">概念</span><br><span class="line">	Date 对象用于处理日期和时间。</span><br><span class="line">创建</span><br><span class="line">	var myDate=new Date()</span><br><span class="line">获取年月日</span><br><span class="line">	getFullYear()</span><br><span class="line">	getMonth()</span><br><span class="line">	getDate()</span><br><span class="line">	getDay()</span><br><span class="line">获取时分秒</span><br><span class="line">	getHours()</span><br><span class="line">	getMinutes()</span><br><span class="line">	getSeconds()</span><br><span class="line">获取毫秒值</span><br><span class="line">	getTime()</span><br><span class="line">	+new Date()</span><br></pre></td></tr></table></figure>
<h2 id="array-对象"><a class="markdownIt-Anchor" href="#array-对象">#</a> Array 对象</h2>
<figure class="highlight text"><figcaption><span>scanner</span></figcaption><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line">创建</span><br><span class="line">	var arr1 = []</span><br><span class="line">	var arr2 = new Array()</span><br><span class="line">	var arr3 = new Array(size)</span><br><span class="line">	var arr4 = new Array(元素1,元素2...)</span><br><span class="line">方法</span><br><span class="line">	pop()</span><br><span class="line">	push()</span><br><span class="line">	sort()</span><br><span class="line">	reverse()</span><br><span class="line">	indexOf()</span><br></pre></td></tr></table></figure>
<h2 id="string-对象"><a class="markdownIt-Anchor" href="#string-对象">#</a> String 对象</h2>
<figure class="highlight text"><figcaption><span>scanner</span></figcaption><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line">查找</span><br><span class="line">	indexOf()</span><br><span class="line">查找指定索引的字符</span><br><span class="line">	charAt()</span><br><span class="line">拼接</span><br><span class="line">	concat()  +</span><br><span class="line">截取</span><br><span class="line">	substr()</span><br><span class="line">替换</span><br><span class="line">	replace()</span><br></pre></td></tr></table></figure>
<h2 id="json-对象"><a class="markdownIt-Anchor" href="#json-对象">#</a> Json 对象</h2>
<figure class="highlight text"><figcaption><span>scanner</span></figcaption><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">json字符串转js对象  parse()</span><br><span class="line">js对象转json字符串 stringify</span><br></pre></td></tr></table></figure>
<h2 id="ecma-基础语法总结"><a class="markdownIt-Anchor" href="#ecma-基础语法总结">#</a> ECMA 基础语法总结</h2>
<figure class="highlight text"><figcaption><span>scanner</span></figcaption><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br></pre></td><td class="code"><pre><span class="line">js</span><br><span class="line">	概念</span><br><span class="line">		脚本语言</span><br><span class="line">	组成</span><br><span class="line">		ECMAScript基础语法 DOM BOM</span><br><span class="line">变量</span><br><span class="line">	概念</span><br><span class="line">		内存中存储数据的那块空间</span><br><span class="line">	使用</span><br><span class="line">		var a = 10;</span><br><span class="line">		a = 20</span><br><span class="line">		a</span><br><span class="line">数据类型</span><br><span class="line">	基本数据类型</span><br><span class="line">		字符型</span><br><span class="line">		数值型</span><br><span class="line">		Boolean型</span><br><span class="line">		null</span><br><span class="line">		undefined</span><br><span class="line">	引用数据类型</span><br><span class="line">		类 Math类 Date类 Array类</span><br><span class="line">	转换</span><br><span class="line">		强制转换</span><br><span class="line">			String()</span><br><span class="line">			Number()</span><br><span class="line">			Boolean()</span><br><span class="line">		自动转换</span><br><span class="line">			+ 有一端是字符,就是拼接</span><br><span class="line">			  两端都不是,使用Number()强转再运算</span><br><span class="line">运算符</span><br><span class="line">	算术运算符  + - * / %</span><br><span class="line">	自增自减运算符 ++ --</span><br><span class="line">	比较运算符  &gt; &lt; &gt;= !=  结果是Boolean类型</span><br><span class="line">	逻辑运算符 &amp;&amp; || !  结果也是Boolean类型  短路</span><br><span class="line">	赋值运算符 = += -= *=   区分=和==</span><br><span class="line">	三元运算符 表达式1?表达式2:表达式3</span><br><span class="line">流程控制</span><br><span class="line">	顺序结构</span><br><span class="line">	选择结构</span><br><span class="line">		if</span><br><span class="line">		if-else</span><br><span class="line">		if-else-if 比较多个条件</span><br><span class="line">		switch 等值判断  穿透</span><br><span class="line">	循环结构</span><br><span class="line">		for  循环次数确定</span><br><span class="line">		while  循环次数不确定,条件确定</span><br><span class="line">		do-while</span><br><span class="line">		双重for循环(了解)</span><br><span class="line">数组</span><br><span class="line">	定义</span><br><span class="line">		[]</span><br><span class="line">	取值 和 赋值</span><br><span class="line">		通过索引</span><br><span class="line">	遍历</span><br><span class="line">		for</span><br><span class="line">	操作</span><br><span class="line">		求和 求最值</span><br><span class="line">函数</span><br><span class="line">	概念</span><br><span class="line">		封装了一段具有特定功能的代码块</span><br><span class="line">	定义和调用</span><br><span class="line">		先定义后调用</span><br><span class="line">	参数</span><br><span class="line">		媒介</span><br><span class="line">	返回值</span><br><span class="line">		通过return返回给调用者</span><br><span class="line">	分类</span><br><span class="line">		普通和匿名</span><br><span class="line">对象</span><br><span class="line">	面向对象 概念</span><br><span class="line">	类和对象</span><br><span class="line">	类的三要素</span><br><span class="line">	定义类</span><br><span class="line">	创建对象 new</span><br><span class="line">	调用属性和方法</span><br><span class="line">	创建对象另外一种方式 字面量</span><br><span class="line"></span><br><span class="line">内置对象</span><br><span class="line">	Math</span><br><span class="line">		随机数 Math.random()</span><br><span class="line">	Date</span><br><span class="line">		Date d = new Date()</span><br><span class="line">	Array</span><br><span class="line">		pop()  push()</span><br><span class="line">	String</span><br><span class="line">		substr() replace()</span><br><span class="line">	JSON</span><br><span class="line">		parse()</span><br><span class="line"></span><br></pre></td></tr></table></figure>
<h2 id="dom-概念"><a class="markdownIt-Anchor" href="#dom-概念">#</a> DOM 概念</h2>
<figure class="highlight text"><figcaption><span>scanner</span></figcaption><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line">每个载入浏览器的 HTML 文档都会成为 Document 对象。</span><br><span class="line">Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问。</span><br><span class="line"></span><br><span class="line">HTML DOM 定义了访问和操作 HTML 文档的标准方法。</span><br><span class="line">DOM 将 HTML 文档表达为树结构。</span><br><span class="line">HTML DOM 定义了所有 HTML 元素的对象和属性，以及访问它们的方法。</span><br><span class="line"></span><br><span class="line">操作思想</span><br><span class="line">	就是将html页面中的所有组成部分(标签,属性,标签体,注释等)抽取成对象,用面向对象的方式来操作这些东西,因为对象中有属性和方法,比单纯操作字符串要方便的多</span><br><span class="line"></span><br><span class="line">根据 W3C 的 HTML DOM 标准，HTML 文档中的所有内容都是节点：</span><br><span class="line">	整个文档是一个文档节点</span><br><span class="line">	每个 HTML 元素是元素节点</span><br><span class="line">	HTML 元素内的文本是文本节点</span><br><span class="line">	每个 HTML 属性是属性节点</span><br><span class="line">	注释是注释节点</span><br></pre></td></tr></table></figure>
<h2 id="dom-获取元素"><a class="markdownIt-Anchor" href="#dom-获取元素">#</a> DOM 获取元素</h2>
<figure class="highlight text"><figcaption><span>scanner</span></figcaption><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">获取单个元素</span><br><span class="line">	getElementById(id的值)</span><br><span class="line">获取多个元素</span><br><span class="line">	getElementByTagName(标签名)</span><br><span class="line">	getElementByClassName(类名)</span><br><span class="line">H5新增--推荐使用</span><br><span class="line">	querySelector(选择器) 第一个元素</span><br><span class="line">	querySelectorAll(选择器))</span><br></pre></td></tr></table></figure>
<h2 id="事件入门"><a class="markdownIt-Anchor" href="#事件入门">#</a> 事件入门</h2>
<figure class="highlight text"><figcaption><span>scanner</span></figcaption><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line">事件通常和js代码一起使用,可以通过事件的发生来执行一段js代码</span><br><span class="line"></span><br><span class="line">三个要素</span><br><span class="line">	1,事件源  		电话                    电动车             按钮</span><br><span class="line">	2,事件   		 电话铃响				  踹                被点了</span><br><span class="line">	3,事件处理程序  铃响之后班主任要做的事情    警报器响(监听器)    点之后弹出弹框</span><br><span class="line"></span><br><span class="line">三个步骤</span><br><span class="line">	1,写一个事件源   		按钮</span><br><span class="line">	2,写一个监听器   		函数</span><br><span class="line">	3,绑定事件源和监听器   用一个属性绑定按钮和监听器</span><br><span class="line">绑定（注册方式）</span><br><span class="line">    传统的注册方式：利用on开头的事件 -- onclick onkeyup</span><br><span class="line">    H5新增的监听注册方式： addEventlistnener（事件名称，匿名函数）</span><br><span class="line"></span><br></pre></td></tr></table></figure>
<h2 id="dom-操作属性"><a class="markdownIt-Anchor" href="#dom-操作属性">#</a> DOM 操作属性</h2>
<figure class="highlight text"><figcaption><span>scanner</span></figcaption><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">设置</span><br><span class="line">	元素对象.属性名 = 属性值</span><br><span class="line">获取</span><br><span class="line">	元素对象.属性名</span><br></pre></td></tr></table></figure>
<h2 id="dom-操作标签体"><a class="markdownIt-Anchor" href="#dom-操作标签体">#</a> DOM 操作标签体</h2>
<figure class="highlight text"><figcaption><span>scanner</span></figcaption><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">设置</span><br><span class="line">	元素对象.innerHTML = 值</span><br><span class="line">获取</span><br><span class="line">	元素对象.innerHTML</span><br></pre></td></tr></table></figure>
<p>DOM 操作样式</p>
<figure class="highlight text"><figcaption><span>scanner</span></figcaption><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">设置</span><br><span class="line">	元素对象.style.属性名=值</span><br><span class="line">获取</span><br><span class="line">	元素对象.style.属性名</span><br></pre></td></tr></table></figure>
<h2 id="焦点事件"><a class="markdownIt-Anchor" href="#焦点事件">#</a> 焦点事件</h2>
<figure class="highlight text"><figcaption><span>scanner</span></figcaption><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">onfocus 获得焦点</span><br><span class="line">onblur 失去焦点</span><br><span class="line"></span><br></pre></td></tr></table></figure>
<h2 id="键盘事件"><a class="markdownIt-Anchor" href="#键盘事件">#</a> 键盘事件</h2>
<figure class="highlight text"><figcaption><span>scanner</span></figcaption><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">keydown  按下</span><br><span class="line">keyup	松开</span><br><span class="line">keypress 按下并按着不动 (识别大小写)</span><br><span class="line">事件对象（e）</span><br><span class="line">  本身就存在的，可以给函数一个参数,在函数体里就可以使用，通过他可以获取事件的方式；可以组织标签的默认行为（跳转、提交等）；还可以获取keycode点击的按键；还可以组织事件冒泡；</span><br></pre></td></tr></table></figure>
<h2 id="事件冒泡"><a class="markdownIt-Anchor" href="#事件冒泡">#</a> 事件冒泡</h2>
<figure class="highlight text"><figcaption><span>scanner</span></figcaption><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">概念</span><br><span class="line">	事件开始时是由最具体的元素接收,然后逐级向上传播到DOM最顶层的节点</span><br><span class="line">阻止冒泡</span><br><span class="line">	有的情况下,我们只想让最具体的元素接收事件,而不想让事件向上传递,就可以用事件对象来阻止冒泡</span><br><span class="line">	e.stopPropagation() //停止传播</span><br><span class="line">	如果浏览器的版本比较低,可以采用下面代码</span><br></pre></td></tr></table></figure>
<p>![img](C:/Users/23361/Documents/Tencent Files/2336182340/FileRecv/day14<em> 资料下发 /day14</em> 资料下发 / 笔记 /day14 课程笔记.assets/9ead631b-adbe-40e8-9553-fddc78d9fec0.jpg)</p>
<h2 id="创建元素"><a class="markdownIt-Anchor" href="#创建元素">#</a> 创建元素</h2>
<figure class="highlight text"><figcaption><span>scanner</span></figcaption><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">createElement(&#x27;元素名称&#x27;)</span><br></pre></td></tr></table></figure>
<h2 id="节点操作"><a class="markdownIt-Anchor" href="#节点操作">#</a> 节点操作</h2>
<figure class="highlight text"><figcaption><span>scanner</span></figcaption><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">appendChild() 在父级节点的子节点后面追加元素</span><br><span class="line">insertBefore() 在父级节点的子节点后面追加元素</span><br></pre></td></tr></table></figure>
<h2 id="bom-简介"><a class="markdownIt-Anchor" href="#bom-简介">#</a> BOM 简介</h2>
<figure class="highlight text"><figcaption><span>scanner</span></figcaption><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line">概念</span><br><span class="line">	浏览器对象模型</span><br><span class="line">组成</span><br><span class="line">	Window  窗口对象</span><br><span class="line">		Window 对象表示浏览器中打开的窗口。</span><br><span class="line">    Navigator  浏览器对象</span><br><span class="line">    	Navigator 对象包含有关浏览器的信息。</span><br><span class="line">    Screen   屏幕对象</span><br><span class="line">    	Screen 对象包含有关客户端显示屏幕的信息。</span><br><span class="line">    History  历史记录对象</span><br><span class="line">    	History 对象包含用户（在浏览器窗口中）访问过的 URL。</span><br><span class="line">    Location  地址栏对象</span><br><span class="line">    	Location 对象包含有关当前 URL 的信息。</span><br><span class="line">操作原理</span><br><span class="line">	将浏览器各个组成部分抽成对象,以面向的方式去操作,提高开发效率(对象有属性和方法,便于操作)</span><br></pre></td></tr></table></figure>
<h2 id="window-对象"><a class="markdownIt-Anchor" href="#window-对象">#</a> window 对象</h2>
<figure class="highlight text"><figcaption><span>scanner</span></figcaption><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">概念</span><br><span class="line">	窗口对象</span><br><span class="line">方法</span><br><span class="line">	定时器相关的</span><br><span class="line">		setTimeout 定时一次   用clearTimeout清除</span><br><span class="line">		setInterval 循环定时  用clearInterval清除</span><br></pre></td></tr></table></figure>
<h2 id="location-对象"><a class="markdownIt-Anchor" href="#location-对象">#</a> location 对象</h2>
<figure class="highlight text"><figcaption><span>scanner</span></figcaption><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">概念</span><br><span class="line">	用于获得当前页面的地址 (URL)，并把浏览器重定向到新的页面。</span><br><span class="line">属性</span><br><span class="line">	location.href  获取</span><br><span class="line">	location.href = 新的url  跳转</span><br><span class="line">方法</span><br><span class="line">	reload() 刷新</span><br></pre></td></tr></table></figure>
<h2 id="history-对象"><a class="markdownIt-Anchor" href="#history-对象">#</a> history 对象</h2>
<figure class="highlight text"><figcaption><span>scanner</span></figcaption><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">概念</span><br><span class="line">	包含浏览器的历史</span><br><span class="line">方法</span><br><span class="line">	forward()</span><br><span class="line">	back()</span><br><span class="line">	go()</span><br></pre></td></tr></table></figure>

      <div class="tags">
          <a href="/my-blog/tags/JavaScript/" rel="tag"><i class="ic i-tag"></i> JavaScript</a>
      </div>
  </div>

   <footer>

    <div class="meta">
  <span class="item">
    <span class="icon">
      <i class="ic i-calendar-check"></i>
    </span>
    <span class="text">更新于</span>
    <time title="修改时间：2022-08-15 14:08:19" itemprop="dateModified" datetime="2022-08-15T14:08:19+08:00">2022-08-15</time>
  </span>
</div>

      
<div class="reward">
  <button><i class="ic i-heartbeat"></i> 赞赏</button>
  <p>我移除了点赞打赏功能....别点了</p>
  <div id="qr">
  </div>
</div>

      

<div id="copyright">
<ul>
  <li class="author">
    <strong>本文作者： </strong>小矮人gason <i class="ic i-at"><em>@</em></i>gason
  </li>
  <li class="link">
    <strong>本文链接：</strong>
    <a href="https://gason1997.gitee.io/my-blog/2022/03/03/web-study/js-study/JavaScript/" title="JavaScript入门">https://gason1997.gitee.io/my-blog/2022/03/03/web-study/js-study/JavaScript/</a>
  </li>
  <li class="license">
    <strong>版权声明： </strong>本站所有文章除特别声明外，均采用 <span class="exturl" data-url="aHR0cHM6Ly9jcmVhdGl2ZWNvbW1vbnMub3JnL2xpY2Vuc2VzL2J5LW5jLXNhLzQuMC9kZWVkLnpo"><i class="ic i-creative-commons"><em>(CC)</em></i>BY-NC-SA</span> 许可协议。转载请注明出处！
  </li>
</ul>
</div>

  </footer>

</article>

  </div>
  

<div class="post-nav">
    <div class="item left">
      

  <a href="/my-blog/2022/02/28/web-study/html-css/CSS/" itemprop="url" rel="prev" data-background-image="https:&#x2F;&#x2F;tva3.sinaimg.cn&#x2F;large&#x2F;008sruU2ly8h4dao32n75j30zk0k0js3.jpg" title="CSS入门">
  <span class="type">上一篇</span>
  <span class="category"><i class="ic i-flag"></i> HTML与CSS</span>
  <h3>CSS入门</h3>
  </a>

    </div>
    <div class="item right">
      

  <a href="/my-blog/2022/07/21/3D-study/webGL/supermap-webGL/" itemprop="url" rel="next" data-background-image="https:&#x2F;&#x2F;tva3.sinaimg.cn&#x2F;large&#x2F;008sruU2ly8h4ergc3xauj319c0u00v3.jpg" title="超图webGL开发指南">
  <span class="type">下一篇</span>
  <span class="category"><i class="ic i-flag"></i> 超图webGL</span>
  <h3>超图webGL开发指南</h3>
  </a>

    </div>
</div>

  
  <div class="wrap" id="comments"></div>


        </div>
        <div id="sidebar">
          

<div class="inner">

  <div class="panels">
    <div class="inner">
      <div class="contents panel pjax" data-title="文章目录">
          <ol class="toc"><li class="toc-item toc-level-1"><a class="toc-link" href="#javascript"><span class="toc-number">1.</span> <span class="toc-text"> JavaScript</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#%E6%A6%82%E5%BF%B5%E5%8F%8A%E5%85%A5%E9%97%A8"><span class="toc-number">1.1.</span> <span class="toc-text"> 概念及入门</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%8F%98%E9%87%8F"><span class="toc-number">1.2.</span> <span class="toc-text"> 变量</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E6%95%B0%E6%8D%AE%E7%B1%BB%E5%9E%8B"><span class="toc-number">1.3.</span> <span class="toc-text"> 数据类型</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E8%BF%90%E7%AE%97%E7%AC%A6"><span class="toc-number">1.4.</span> <span class="toc-text"> 运算符</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E9%80%89%E6%8B%A9%E8%AF%AD%E5%8F%A5"><span class="toc-number">1.5.</span> <span class="toc-text"> 选择语句</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%BE%AA%E7%8E%AF%E8%AF%AD%E5%8F%A5"><span class="toc-number">1.6.</span> <span class="toc-text"> 循环语句</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E4%B8%A4%E4%B8%AA%E5%85%B3%E9%94%AE%E5%AD%97"><span class="toc-number">1.7.</span> <span class="toc-text"> 两个关键字</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E6%95%B0%E7%BB%84"><span class="toc-number">1.8.</span> <span class="toc-text"> 数组</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%87%BD%E6%95%B0"><span class="toc-number">1.9.</span> <span class="toc-text"> 函数</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E9%9D%A2%E5%90%91%E5%AF%B9%E8%B1%A1"><span class="toc-number">1.10.</span> <span class="toc-text"> 面向对象</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#math-%E5%AF%B9%E8%B1%A1"><span class="toc-number">1.11.</span> <span class="toc-text"> Math 对象</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#date-%E5%AF%B9%E8%B1%A1"><span class="toc-number">1.12.</span> <span class="toc-text"> Date 对象</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#array-%E5%AF%B9%E8%B1%A1"><span class="toc-number">1.13.</span> <span class="toc-text"> Array 对象</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#string-%E5%AF%B9%E8%B1%A1"><span class="toc-number">1.14.</span> <span class="toc-text"> String 对象</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#json-%E5%AF%B9%E8%B1%A1"><span class="toc-number">1.15.</span> <span class="toc-text"> Json 对象</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#ecma-%E5%9F%BA%E7%A1%80%E8%AF%AD%E6%B3%95%E6%80%BB%E7%BB%93"><span class="toc-number">1.16.</span> <span class="toc-text"> ECMA 基础语法总结</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#dom-%E6%A6%82%E5%BF%B5"><span class="toc-number">1.17.</span> <span class="toc-text"> DOM 概念</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#dom-%E8%8E%B7%E5%8F%96%E5%85%83%E7%B4%A0"><span class="toc-number">1.18.</span> <span class="toc-text"> DOM 获取元素</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E4%BA%8B%E4%BB%B6%E5%85%A5%E9%97%A8"><span class="toc-number">1.19.</span> <span class="toc-text"> 事件入门</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#dom-%E6%93%8D%E4%BD%9C%E5%B1%9E%E6%80%A7"><span class="toc-number">1.20.</span> <span class="toc-text"> DOM 操作属性</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#dom-%E6%93%8D%E4%BD%9C%E6%A0%87%E7%AD%BE%E4%BD%93"><span class="toc-number">1.21.</span> <span class="toc-text"> DOM 操作标签体</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E7%84%A6%E7%82%B9%E4%BA%8B%E4%BB%B6"><span class="toc-number">1.22.</span> <span class="toc-text"> 焦点事件</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E9%94%AE%E7%9B%98%E4%BA%8B%E4%BB%B6"><span class="toc-number">1.23.</span> <span class="toc-text"> 键盘事件</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E4%BA%8B%E4%BB%B6%E5%86%92%E6%B3%A1"><span class="toc-number">1.24.</span> <span class="toc-text"> 事件冒泡</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%88%9B%E5%BB%BA%E5%85%83%E7%B4%A0"><span class="toc-number">1.25.</span> <span class="toc-text"> 创建元素</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E8%8A%82%E7%82%B9%E6%93%8D%E4%BD%9C"><span class="toc-number">1.26.</span> <span class="toc-text"> 节点操作</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#bom-%E7%AE%80%E4%BB%8B"><span class="toc-number">1.27.</span> <span class="toc-text"> BOM 简介</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#window-%E5%AF%B9%E8%B1%A1"><span class="toc-number">1.28.</span> <span class="toc-text"> window 对象</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#location-%E5%AF%B9%E8%B1%A1"><span class="toc-number">1.29.</span> <span class="toc-text"> location 对象</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#history-%E5%AF%B9%E8%B1%A1"><span class="toc-number">1.30.</span> <span class="toc-text"> history 对象</span></a></li></ol></li></ol>
      </div>
      <div class="related panel pjax" data-title="系列文章">
        <ul>
          <li class="active"><a href="/my-blog/2022/03/03/web-study/js-study/JavaScript/" rel="bookmark" title="JavaScript入门">JavaScript入门</a></li>
        </ul>
      </div>
      <div class="overview panel" data-title="站点概览">
        <div class="author" itemprop="author" itemscope itemtype="http://schema.org/Person">
  <img class="image" itemprop="image" alt="小矮人gason"
      data-src="/my-blog/images/avatar.jpg">
  <p class="name" itemprop="name">小矮人gason</p>
  <div class="description" itemprop="description">大丈夫之志应如长江东奔大海</div>
</div>

<nav class="state">
    <div class="item posts">
      <a href="/my-blog/archives/">
        <span class="count">25</span>
        <span class="name">文章</span>
      </a>
    </div>
    <div class="item categories">
      <a href="/my-blog/categories/">
        <span class="count">29</span>
        <span class="name">分类</span>
      </a>
    </div>
    <div class="item tags">
      <a href="/my-blog/tags/">
        <span class="count">9</span>
        <span class="name">标签</span>
      </a>
    </div>
</nav>

<div class="social">
      <span class="exturl item github" data-url="aHR0cHM6Ly9naXRodWIuY29tL3lvdXJuYW1l" title="https:&#x2F;&#x2F;github.com&#x2F;yourname"><i class="ic i-github"></i></span>
      <span class="exturl item twitter" data-url="aHR0cHM6Ly90d2l0dGVyLmNvbS95b3VybmFtZQ==" title="https:&#x2F;&#x2F;twitter.com&#x2F;yourname"><i class="ic i-twitter"></i></span>
      <span class="exturl item zhihu" data-url="aHR0cHM6Ly93d3cuemhpaHUuY29tL3Blb3BsZS94aWFvLWFpLXJlbi01NS01Ng==" title="https:&#x2F;&#x2F;www.zhihu.com&#x2F;people&#x2F;xiao-ai-ren-55-56"><i class="ic i-zhihu"></i></span>
      <span class="exturl item music" data-url="aHR0cHM6Ly9tdXNpYy4xNjMuY29tLyMvdXNlci9ob21lP2lkPTI4ODYzNzQ4MA==" title="https:&#x2F;&#x2F;music.163.com&#x2F;#&#x2F;user&#x2F;home?id&#x3D;288637480"><i class="ic i-cloud-music"></i></span>
      <span class="exturl item weibo" data-url="aHR0cHM6Ly93ZWliby5jb20vdS8yODAzMzAxNzAx" title="https:&#x2F;&#x2F;weibo.com&#x2F;u&#x2F;2803301701"><i class="ic i-weibo"></i></span>
      <span class="exturl item about" data-url="aHR0cHM6Ly9icm9hZGxlYWYtbWFpemUtMzM1Lm5vdGlvbi5zaXRlL1Nhbmctcy1Ib21lcGFnZS00MzZhMGI4ZGExMjI0ODcwOWVkNGEzM2JkNzYyNDcwNA==" title="https:&#x2F;&#x2F;broadleaf-maize-335.notion.site&#x2F;Sang-s-Homepage-436a0b8da12248709ed4a33bd7624704"><i class="ic i-address-card"></i></span>
</div>

<ul class="menu">
  
    
  <li class="item">
    <a href="/my-blog/" rel="section"><i class="ic i-home"></i>首页</a>
  </li>

        
  <li class="item dropdown">
      <a href="javascript:void(0);"><i class="ic i-feather"></i>文章</a>
    <ul class="submenu">

        
  <li class="item">
    <a href="/my-blog/archives/" rel="section"><i class="ic i-list-alt"></i>归纳</a>
  </li>

        
  <li class="item">
    <a href="/my-blog/categories/" rel="section"><i class="ic i-th"></i>分类</a>
  </li>

        
  <li class="item">
    <a href="/my-blog/tags/" rel="section"><i class="ic i-tags"></i>标签</a>
  </li>

  </ul>
    
  <li class="item">
    <a href="/my-blog/about/" rel="section"><i class="ic i-user"></i>关于</a>
  </li>

    
  <li class="item">
    <a href="/my-blog/links/" rel="section"><i class="ic i-magic"></i>相关链接</a>
  </li>


</ul>

      </div>
    </div>
  </div>

  <ul id="quick">
    <li class="prev pjax">
        <a href="/my-blog/2022/02/28/web-study/html-css/CSS/" rel="prev" title="上一篇"><i class="ic i-chevron-left"></i></a>
    </li>
    <li class="up"><i class="ic i-arrow-up"></i></li>
    <li class="down"><i class="ic i-arrow-down"></i></li>
    <li class="next pjax">
        <a href="/my-blog/2022/07/21/3D-study/webGL/supermap-webGL/" rel="next" title="下一篇"><i class="ic i-chevron-right"></i></a>
    </li>
    <li class="percent"></li>
  </ul>
</div>


        </div>
        <div class="dimmer"></div>
      </div>
    </main>
    <footer id="footer">
      <div class="inner">
        <div class="widgets">
          
<div class="rpost pjax">
  <h2>随机文章</h2>
  <ul>
      
  <li class="item">
    
<div class="breadcrumb">
<a href="/my-blog/categories/arc-study/" title="分类于 建筑学习类">建筑学习类</a>
<i class="ic i-angle-right"></i>
<a href="/my-blog/categories/arc-study/rhino-GH/" title="分类于 Rhino与grasshopper">Rhino与grasshopper</a>
<i class="ic i-angle-right"></i>
<a href="/my-blog/categories/arc-study/rhino-GH/grasshopper%E5%85%A5%E9%97%A8/" title="分类于 grasshopper入门">grasshopper入门</a>
</div>

    <span><a href="/my-blog/2022/08/16/arc-study/rhino-GH/GH/1.grasshopper%E6%98%AF%E4%BB%80%E4%B9%88%EF%BC%9F/" title="1.grasshopper是什么？">1.grasshopper是什么？</a></span>
  </li>

      
  <li class="item">
    
<div class="breadcrumb">
<a href="/my-blog/categories/arc-study/" title="分类于 建筑学习类">建筑学习类</a>
<i class="ic i-angle-right"></i>
<a href="/my-blog/categories/arc-study/rhino-GH/" title="分类于 Rhino与grasshopper">Rhino与grasshopper</a>
<i class="ic i-angle-right"></i>
<a href="/my-blog/categories/arc-study/rhino-GH/grasshopper%E5%85%A5%E9%97%A8/" title="分类于 grasshopper入门">grasshopper入门</a>
</div>

    <span><a href="/my-blog/2022/08/16/arc-study/rhino-GH/GH/2.%E5%BC%80%E5%A7%8B%E4%BD%BF%E7%94%A8Grasshopper/" title="2.开始使用Grasshopper">2.开始使用Grasshopper</a></span>
  </li>

      
  <li class="item">
    
<div class="breadcrumb">
<a href="/my-blog/categories/web-study/" title="分类于 前端基础类">前端基础类</a>
<i class="ic i-angle-right"></i>
<a href="/my-blog/categories/web-study/js-study/" title="分类于 Javascript">Javascript</a>
</div>

    <span><a href="/my-blog/2022/03/03/web-study/js-study/JavaScript/" title="JavaScript入门">JavaScript入门</a></span>
  </li>

      
  <li class="item">
    
<div class="breadcrumb">
<a href="/my-blog/categories/arc-study/" title="分类于 建筑学习类">建筑学习类</a>
<i class="ic i-angle-right"></i>
<a href="/my-blog/categories/arc-study/rhino-GH/" title="分类于 Rhino与grasshopper">Rhino与grasshopper</a>
<i class="ic i-angle-right"></i>
<a href="/my-blog/categories/arc-study/rhino-GH/grasshopper%E5%88%9D%E7%BA%A7/" title="分类于 grasshopper初级">grasshopper初级</a>
</div>

    <span><a href="/my-blog/2022/08/17/arc-study/rhino-GH/GH/%E5%88%9D%E7%BA%A7/0.%E5%9F%BA%E6%9C%AC%E5%8E%9F%E7%90%86%E8%A7%A3%E9%87%8A/" title="0.基本原理解释">0.基本原理解释</a></span>
  </li>

      
  <li class="item">
    
<div class="breadcrumb">
<a href="/my-blog/categories/arc-study/" title="分类于 建筑学习类">建筑学习类</a>
<i class="ic i-angle-right"></i>
<a href="/my-blog/categories/arc-study/rhino-GH/" title="分类于 Rhino与grasshopper">Rhino与grasshopper</a>
<i class="ic i-angle-right"></i>
<a href="/my-blog/categories/arc-study/rhino-GH/grasshopper%E5%85%A5%E9%97%A8/" title="分类于 grasshopper入门">grasshopper入门</a>
</div>

    <span><a href="/my-blog/2022/08/17/arc-study/rhino-GH/GH/4.%E5%88%9D%E8%AF%86Grasshopper%E7%95%8C%E9%9D%A2/" title="4.初识Grasshopper界面">4.初识Grasshopper界面</a></span>
  </li>

      
  <li class="item">
    
<div class="breadcrumb">
<a href="/my-blog/categories/management/" title="分类于 综合学习类">综合学习类</a>
<i class="ic i-angle-right"></i>
<a href="/my-blog/categories/management/GLZH/" title="分类于 管理综合">管理综合</a>
<i class="ic i-angle-right"></i>
<a href="/my-blog/categories/management/GLZH/%E5%86%99%E4%BD%9C/" title="分类于 写作">写作</a>
</div>

    <span><a href="/my-blog/2022/08/15/management/GLZH/writing/%E5%86%99%E4%BD%9C2/" title="写作2">写作2</a></span>
  </li>

      
  <li class="item">
    
<div class="breadcrumb">
<a href="/my-blog/categories/3D-study/" title="分类于 三维开发类">三维开发类</a>
<i class="ic i-angle-right"></i>
<a href="/my-blog/categories/3D-study/webGL-study/" title="分类于 webGL">webGL</a>
<i class="ic i-angle-right"></i>
<a href="/my-blog/categories/3D-study/webGL-study/%E8%B6%85%E5%9B%BEwebGL/" title="分类于 超图webGL">超图webGL</a>
</div>

    <span><a href="/my-blog/2022/07/21/3D-study/webGL/supermap-webGL/" title="超图webGL开发指南">超图webGL开发指南</a></span>
  </li>

      
  <li class="item">
    
<div class="breadcrumb">
<a href="/my-blog/categories/arc-study/" title="分类于 建筑学习类">建筑学习类</a>
<i class="ic i-angle-right"></i>
<a href="/my-blog/categories/arc-study/revit-dynamo/" title="分类于 Revit与Dynamo">Revit与Dynamo</a>
<i class="ic i-angle-right"></i>
<a href="/my-blog/categories/arc-study/revit-dynamo/Revit/" title="分类于 Revit">Revit</a>
</div>

    <span><a href="/my-blog/2022/08/15/arc-study/revit-dynamo/revit%E4%B8%8B%E8%BD%BD%E4%B8%8E%E5%AE%89%E8%A3%85/" title="Revit下载与安装">Revit下载与安装</a></span>
  </li>

      
  <li class="item">
    
<div class="breadcrumb">
<a href="/my-blog/categories/deploy-study/" title="分类于 运维部署类">运维部署类</a>
</div>

    <span><a href="/my-blog/2022/07/30/deploy_study/tomcat+nginx%E9%83%A8%E7%BD%B2%EF%BC%88windows%EF%BC%89/" title="tomcat+nginx 部署（windows）">tomcat+nginx 部署（windows）</a></span>
  </li>

      
  <li class="item">
    
<div class="breadcrumb">
<a href="/my-blog/categories/arc-study/" title="分类于 建筑学习类">建筑学习类</a>
<i class="ic i-angle-right"></i>
<a href="/my-blog/categories/arc-study/revit-dynamo/" title="分类于 Revit与Dynamo">Revit与Dynamo</a>
<i class="ic i-angle-right"></i>
<a href="/my-blog/categories/arc-study/revit-dynamo/Dynamo/" title="分类于 Dynamo">Dynamo</a>
</div>

    <span><a href="/my-blog/2022/08/15/arc-study/revit-dynamo/dynamo%E4%B8%8B%E8%BD%BD%E4%B8%8E%E5%AE%89%E8%A3%85/" title="Dynamo下载与安装">Dynamo下载与安装</a></span>
  </li>

  </ul>
</div>
<div>
  <h2>最新评论</h2>
  <ul class="leancloud-recent-comment"></ul>
</div>

        </div>
        <div class="status">
  <div class="copyright">
    
    &copy; 
    <span itemprop="copyrightYear">2022</span>
    <span class="with-love">
      <i class="ic i-sakura rotate"></i>
    </span>
    <span class="author" itemprop="copyrightHolder">小矮人gason @ Sang`s Homepage</span>
  </div>
  <div class="count">
    <span class="post-meta-item-icon">
      <i class="ic i-chart-area"></i>
    </span>
    <span title="站点总字数">92k 字</span>

    <span class="post-meta-divider">|</span>
    <span class="post-meta-item-icon">
      <i class="ic i-coffee"></i>
    </span>
    <span title="站点阅读时长">1:24</span>
  </div>
  <div class="powered-by">
    基于 <span class="exturl" data-url="aHR0cHM6Ly9oZXhvLmlv">Hexo</span> the Theme.<span class="exturl" data-url="aHR0cHM6Ly9naXRodWIuY29tL2FtZWhpbWUvaGV4by10aGVtZS1zaG9rYQ==">Shoka</span>
  </div>
</div>

      </div>
    </footer>
  </div>
<script data-config type="text/javascript">
  var LOCAL = {
    path: '2022/03/03/web-study/js-study/JavaScript/',
    favicon: {
      show: "点开格桑的网页了....",
      hide: "离开格桑的网页了...."
    },
    search : {
      placeholder: "文章搜索",
      empty: "关于 「 ${query} 」，什么也没搜到",
      stats: "${time} ms 内找到 ${hits} 条结果"
    },
    valine: true,fancybox: true,
    copyright: '复制成功，转载请遵守 <i class="ic i-creative-commons"></i>BY-NC-SA 协议。',
    ignores : [
      function(uri) {
        return uri.includes('#');
      },
      function(uri) {
        return new RegExp(LOCAL.path+"$").test(uri);
      }
    ]
  };
</script>

<script src="https://cdn.polyfill.io/v2/polyfill.js"></script>

<script src="//cdn.jsdelivr.net/combine/npm/pace-js@1.0.2/pace.min.js,npm/pjax@0.2.8/pjax.min.js,npm/whatwg-fetch@3.4.0/dist/fetch.umd.min.js,npm/animejs@3.2.0/lib/anime.min.js,npm/algoliasearch@4/dist/algoliasearch-lite.umd.js,npm/instantsearch.js@4/dist/instantsearch.production.min.js,npm/lozad@1/dist/lozad.min.js,npm/quicklink@2/dist/quicklink.umd.js"></script>

<script src="/my-blog/js/app.js?v=0.2.5"></script>




</body>
</html>
